<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/herder.css">
  <link rel="stylesheet" href="./css/banner.css">
  <link rel="stylesheet" href="./css/intro.css">
  <link rel="stylesheet" href="./css/goodsList.css">
  <link rel="stylesheet" href="./css/footer.css">
</head>
<body>
  <div class="header inner-c">
      <div class="header-top">
        <div class="left">
          <ul>
            <li>
              <a href="#">魅族官网</a>
            </li>
            <li>
              <a href="#">魅族商城</a>
            </li>
            <li>
              <a href="#">Flyme</a>
            </li>
            <li>
              <a href="#">专卖店</a>
            </li>
            <li>
              <a href="#">服务</a>
            </li>
            <li>
              <a href="#">社区</a>
            </li>
          </ul>
        </div>
        <div class="right">
          <ul>
            <li>
              <a href="#">注册</a>
            </li>
            <li>
              <a href="#">登录</a>
            </li>
            <li>
              <a href="#">我的订单</a>
            </li>
            <li>
              <a href="#">我的收藏</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="header-bottom inner-c">
          <h1>
            <a href="#">
              <img src="./img/logo.png">
            </a>  
          </h1>
          <ul>
            <li><a href="">PRO手机</a></li>
            <li><a href="">魅蓝手机</a></li>
            <li><a href="">MX手机</a></li>
            <li><a href="">精选配件</a></li>
            <li><a href="">智能硬件</a></li>
          </ul>
      </div>
  </div>
  <div class="banner"> 
    <div class="left">
      <ul>
        <li>全部商品分类</li>
          <li><a href="#">手机</a></li>
          <li><a href="#">智能硬件</a></li>
        <li>
          <a href="#">耳机</a> 
          <i>/</i>
          <a href="#">音箱</a>      
        </li>
        <li>
          <a href="#">路由器</a>
          <i>/</i>
          <a href="#">移动电源</a> 
        </li>
        <li>
          <a href="#">保护套</a>
          <i>/</i>
          <a href="#">后盖</a>
          <i>/</i>
          <a href="#">贴膜</a>
          <i>/</i>
        </li>
        <li>
          <a href="#">数据线</a>
          <i>/</i>
          <a href="#">电源适配器</a>
        </li>
        <li>
          <a href="#">周边配件</a>
        </li>
      </ul>
    </div>
    <div class="right">
        <ul class="types">
          <li>
            <img src="./img/banner.jpg">
          </li>
          <li>
            <img src="./img/banner.jpg">
          </li>
        </ul>
        <ul class="cycle-list">
          <li>
            <i class="current"></i>
          </li> 
          <li>
            <i></i>
          </li>
          <li>
            <i></i>
          </li>
          <li>
            <i></i>
          </li>
          <li>
            <i></i>
          </li>
        </ul>
        <i class="pre">
          <img src="./img/pre.png"/>
        </i>
        <i class="next">
          <img src="./img/next.png"/>
        </i>
    </div>
  </div>
  <div class="intro inner-c"> 
      <div class="left">
        <ul class="left-ul">
          <li>
            <img src="./img/1450855246-61162.png"><p>M码通道</p>
          </li>
          <li>
            <img src="./img/1450855279-64872.png">
            <p>M码通道</p>
          </li>
          <li>
            <img src="./img/1450855198-58056.png"><p>魅族意外险</p>
          </li>
          <li>
            <img src="./img/1451960447-93534.png">
            <p>回购单查询</p>
          </li>
        </ul>
        <ul class="img-ul">
          <li>
            <img src="./img/1469442560-64371.jpg">
          </li>
          <li>
            <img src="./img/Cix_s1fuEgmAc5NwAABEl576SHY123.jpg">
          </li>
          <li>
            <img src="./img/CnQOjVfhDa2AKtdyAAAtKjihE5E114.jpg">
          </li>
          <li>
            <img src="./img/Cix_s1f66-eAGausAABXAszHWuE990.png">
          </li>
        </ul>
      </div>
  </div>
  <div class="goodsList">
      <div class="title">
        <h2>手机</h2>
        <p>更多<i>></i></p>
      </div>
      <ul>
        <li>
          <img src="./img/CnQOjVf4y6iAe-3RAAbqolcyaco939_180x180.png">
          <p class="name">魅蓝3</p>
          <p>
            <span>11日-12日</span>
            <span>公开版限量开售</span>
          </p>
          <p class="price">￥599</p>
        </li>
        <li>
          <img src="./img/CnQOjVf4y6iAe-3RAAbqolcyaco939_180x180.png">
          <p class="name">魅蓝3</p>
          <p>
            <span>11日-12日</span>
            <span>公开版限量开售</span>
          </p>
          <p class="price">￥599</p>
        </li>  <li>
          <img src="./img/CnQOjVf4y6iAe-3RAAbqolcyaco939_180x180.png">
          <p class="name">魅蓝3</p>
          <p>
            <span>11日-12日</span>
            <span>公开版限量开售</span>
          </p>
          <p class="price">￥599</p>
        </li>  <li>
          <img src="./img/CnQOjVf4y6iAe-3RAAbqolcyaco939_180x180.png">
          <p class="name">魅蓝3</p>
          <p>
            <span>11日-12日</span>
            <span>公开版限量开售</span>
          </p>
          <p class="price">￥599</p>
        </li> 
        <li class="last">
          <img src="./img/CnQOjVf4y6iAe-3RAAbqolcyaco939_180x180.png">
          <p class="name">魅蓝3</p>
          <p>
            <span>11日-12日</span>
            <span>公开版限量开售</span>
          </p>
          <p class="price">￥599</p>
        </li>
      </ul>
  </div>
  <div class="footer">
    <div class="top">
      <dl>
        <dt>帮助说明</dt>
        <dd>
          <a href="#">支付方式</a>
          <a href="#">配送说明</a>
          <a href="#">售后服务</a>
          <a href="#">付款帮助</a>
        </dd>
      </dl>
      <dl>
        <dt>Flyme</dt>
        <dd>
          <a href="#">开放平台</a>
          <a href="#">固件下载</a>
          <a href="#">软件商店</a>
          <a href="#">查找手机</a>
        </dd>
      </dl>
      <dl>
        <dt>关于我们</dt>
        <dd>
          <a href="#">关于魅族</a>
          <a href="#">加入我们</a>
          <a href="#">联系我们</a>
          <a href="#">法律声明</a>
        </dd>
      </dl>
      <dl>
        <dt>关注我们</dt>
        <dd>
          <a href="#">新浪微博</a>
          <a href="#">腾讯微博</a>
          <a href="#">QQ空间</a>
          <a href="#">官方微信</a>
        </dd>
      </dl>
      <div>
        <p class="hot-line">24小时全国服务热线</p>
        <p class="phone-num">400-788-3333</p>
        <a href="#">
          <i><img src="./img/wechat.png"></i>
          <span>24小时在线客服</span>
        </a>
      </div>
    </div>
    <div class="bottom">
        <span>@2016 Meizu Telecom Equipment Co., Ltd. All rights reserved.</span>
        <span>备案号：粤ICP备13003602号-2 </span>
        <span>经营许可证编号：粤B2-20130198</span>
        <span>营业执照</span>
        <img src="./img/footer-copy-1.png" alt="" srcset="">
        <img src="./img/trust-icon.png" alt="" srcset="">
    </div>
  </div>
</body>
</html>